<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性-侦听-练习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>
<div id="app">
    <p>今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，
        含税价格为：{{priceInTax}}円，
        折合人民币为：{{priceChinaRMB}}元。
    </p>
    <button @click="btnClick(10000)">加价10000円</button>
</div>

<script>

    var app = new Vue({
        el: '#app',
        data: {
            price:3200,
            //newPrice:10000,
            priceInTax:0,
            priceChinaRMB:0
        },
        methods:{
            btnClick: function(newPrice){
                this.price += newPrice;
            },
        },

        watch: {
            price:function(newVal,oldVal){
                console.log("newPrice:"+newVal +"  oldPrice:"+oldVal);
                this.priceInTax= Math.round(this.price*1.08);
                this.priceChinaRMB= Math.round(this.priceInTax / 16.75);
            },

        }
    });
</script>
</body>
</html>
